<template>
    <ul class="bill">
        <li class="bill_one" v-for="(item, key) in billList" :key="key" @click="tiaozhuan(item.path)">
            <div class="msg">
                <span>{{item.name}}</span>
                <i class="icon iconfont icon-youjiantou f32" v-if="!item.child"></i>
            </div>
            <ol class="bill_child" v-if="item.child">
                <li class="bill_two" v-for="(it, k) in item.child" :key="k" @click.stop="tiaozhuan(it.path)">
                    <span>{{it.name}}</span>
                    <i class="icon iconfont icon-youjiantou f32"></i>    
                </li> 
            </ol>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'bill',
        data() {
            return {
                billList: [
                    {
                        name: '提现',
                        path: '/deposit',
                        child: [],
                    },
                    {
                        name: '收入账单',
                        path: '/income',
                        child: [],
                    },
                    // {
                    //     name: '我的客户',
                    //     path: '/bill',
                    // },
                ]
            }
        },
        methods: {
            tiaozhuan(path) {
                this.$router.push({
                    path: path,
                })
            },
            isOperator() {
                let params = {
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('isOperator', params).then(res => {
                    if(res.code == 200) {
                        if(res.data.operator_id && this.$store.state.isMaster){
                            this.billList[0].path = ''
                            this.billList[1].path = ''
                            this.billList[0].child = [
                                {
                                    name: '大师提现',
                                    path: '/deposit?type=1', // 1 大师  2 运营商
                                },
                                {
                                    name: '运营商提现',
                                    path: '/deposit?type=2', // 1 大师  2 运营商
                                }
                            ]
                            this.billList[1].child = [
                                {
                                    name: '大师账单',
                                    path: '/income?type=1', // 1 大师  2 运营商
                                },
                                {
                                    name: '运营商账单',
                                    path: '/income?type=2', // 1 大师  2 运营商
                                }
                            ]
                        } else if(this.$store.state.isMaster && !res.data.operator_id) {
                            this.billList[0].path = '/deposit?type=1'
                            this.billList[1].path = '/income?type=1'
                        } else if(!this.$store.state.isMaster && res.data.operator_id) {
                            this.billList[0].path = '/deposit?type=2'
                            this.billList[1].path = '/income?type=2'
                        }
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            }
        },
        mounted() {
            this.isOperator()
        }
    }
</script>

<style lang="less" scoped>
    .bill{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        .bill_one{
            border-bottom: 1px solid #f2f2f2;
            .msg{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .padd(0, 20);
                box-sizing: border-box;
                .lh(88);
                i.icon{
                    transform:scale(1.5);
                }
            }
            .bill_child{
                width: 100%;
                .bill_two{
                    .h(88);
                    .pl(60);
                    .pr(20);
                    .lh(88);
                    box-sizing: border-box;
                    background: rgba(156, 156, 156, 0.1);
                    display: flex;
                    justify-content: space-between;
                    &:nth-child(1){
                        border-bottom:1px solid #fff;
                    }
                    i.icon{
                        transform:scale(1.5);
                    }
                } 
            }
        }
    }
</style>
